<template>
  <div class="edit">
    <!-- 面包屑导航 -->
    <mybreadcrumb />

    <Editor
      ref="myeditor"
      api-key="no-api-key"
      :init="{
        plugins: 'lists link image table code help wordcount',
        menubar: false,
        toolbar: 'undo redo | styles | bold italic | link image'
      }"
    />

    <div class="btns">
      <el-button @click="getStr">发布</el-button>
    </div>
  </div>
</template>

<script setup>

import {ref} from 'vue'
//导入组件
import Editor from '@tinymce/tinymce-vue'

var myeditor = ref();

var getStr = ()=>{
  // myeditor.value.getEditor() 获取编辑器的核心实例
  // myeditor.value.getEditor().getContent() 获取编辑器编辑区的内容
  // 拿到的内容是带有标签和样式的字符串, 这个字符串就可以发布到服务器.
  console.log( myeditor.value.getEditor().getContent() );
}

</script>

<style>

</style>